<template>
	<view class="main">
		<view class="" v-if="stuList.length !=0">
			<view class="box box-align-center box-pack-start bgcfff mb20 padd10" v-for="(item,index) in stuList" :key="index" @click="goDetail(item)">
				<u-avatar :src="item.img" mode="square" size="160"></u-avatar>
				<view class="box box-tb box-align-start box-align-center ml10 content">
					<view class="title posr">
						<view class="text">
							{{item.title}}
						</view>
						<view class="tips" v-if="ispfxz && item.wpyNum !=0">
							未批阅 +{{item.wpyNum}}
						</view>
					</view>
<!-- 					<view class="limit-time mt10">
						任务期限：{{item.endDate}}
					</view> -->
				</view>
				<view class="circle box box-align-center box-pack-center" v-if="item.wcstate != `0`">
					已完成
				</view>
				<view class="ondone" v-else>
					未完成
				</view>
			</view>
		</view>
		<no-data class="no-data" v-else></no-data>
		<view-tabbar></view-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				role:uni.getStorageSync('role'),
				user:uni.getStorageSync('user'),
				dclass:uni.getStorageSync('dclass'),
				roleList:uni.getStorageSync('roles'),
				stuList:[],
				ispfxz:false
			}
		},
		onShow() {
			this.getStuClass()
			
		},
		onLoad(opt) {
			if (this.roleList.indexOf('member') !=-1 || this.roleList.indexOf('header') !=-1) {
				
				this.ispfxz = true;
			}
		},
		methods: {
			//查询班级 学生
			getStuClass() {
				let opts = {
					url: '/dclass/getStuClass',
					method: 'post'
				};
				let params = {
					userid: this.user.id
				};
				this.$api.post(opts, params).then(res => {
					this.listStuLdsjRec();
					uni.setStorageSync('dclass', res.data);
				})
			},
			listStuLdsjRec(){
				let opts = {
					url: '/yclassldsjtaskrecords/listStuLdsjRec',
					method: 'post'
				};
				let params = {
					schoolid:this.user.schoolId,
					classid:this.dclass.id,
					userid:this.user.id
				};
				this.$api.post(opts, params).then(res => {
					console.log(res.list);
					this.stuList = res.list;
					this.plan = res.plan;
				})
			},
			goDetail(item){
				console.log(item)
				uni.navigateTo({
					url:'/stupageHome/sjDetail?id='+item.ldsjid+'&planid='+item.sjlistid+ '&wcstate='+item.wcstate
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.bgcfff {
		background-color: #fff;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}

	.posr {
		position: relative;
		font-size: 32rpx;
		font-weight: 600;

		.tips {
			position: absolute;
			top: -21rpx;
			right: -142rpx;
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #FF5A77;
			border-radius: 26rpx;
			font-size: 20rpx;
			text-align: center;
			color: #fff;
		}
	}

	.limit-time {
		color: #5F6572;
		font-size: 22rpx;
	}

	
	.sliders {
		width: 80%;
	}

	.content {
		width: 500rpx;
	}
	.percent {
		font-size: 25rpx;
	}
	.cnt {
		color: #7686F6;
	}
	.circle {
		position: absolute;
		bottom: -28rpx;
		right: -20rpx;
		width: 130rpx;
		height: 130rpx;
		border: 4rpx solid #D2D5F1;
		border-radius: 50%;
		transform: rotate(15deg);
		font-size: 24rpx;
		color: #D2D5F1;
	}
	
	.ondone {
		position: absolute;
		bottom: 22rpx;
		right: 23rpx;
		font-size: 24rpx;
		color: #FF5A77;
	}
	
	.text {
		width: 350rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.no-data{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
